import React from 'react';

import BoxItem from '../../../components/BoxItem';
import BorderTable from '../components/BorderTable';

import { Button, DatePicker, Form, Input, Select } from 'antd';

const { RangePicker } = DatePicker;
export default function DamageReport() {
	const columns = [
		{ title: '单据编码', dataIndex: 'documentCode', key: 'documentCode' }, // 单据编码
		{ title: '报损仓库', dataIndex: 'damageWarehouse', key: 'damageWarehouse' }, // 报损仓库
		{ title: '报损数量', dataIndex: 'damageQuantity', key: 'damageQuantity' }, // 报损数量
		{ title: '涉及金额', dataIndex: 'damageAmount', key: 'damageAmount' }, // 涉及金额
		{ title: '报损状态', dataIndex: 'damageStatus', key: 'damageStatus' }, // 报损状态
		{ title: '创建时间', dataIndex: 'creationTime', key: 'creationTime' }, // 创建时间
		{ title: '备注', dataIndex: 'remarks', key: 'remarks' }, // 备注
		{ title: '操作', dataIndex: 'operation', key: 'operation' } // 操作
	];

	const dataSource = [
		{
			key: '1',
			documentCode: 'DC001',
			damageWarehouse: '仓库A',
			damageQuantity: 100,
			damageAmount: 1500,
			damageStatus: '待处理',
			creationTime: '2024-11-01 10:00',
			remarks: '初步检查',
			operation: ['详情', '设置']
		},
		{
			key: '2',
			documentCode: 'DC002',
			damageWarehouse: '仓库B',
			damageQuantity: 200,
			damageAmount: 3000,
			damageStatus: '已处理',
			creationTime: '2024-11-02 12:30',
			remarks: '处理完成',
			operation: ['详情', '设置']
		},
		{
			key: '3',
			documentCode: 'DC003',
			damageWarehouse: '仓库C',
			damageQuantity: 50,
			damageAmount: 750,
			damageStatus: '待处理',
			creationTime: '2024-11-03 09:15',
			remarks: '待审批',
			operation: ['详情', '设置']
		},
		{
			key: '4',
			documentCode: 'DC004',
			damageWarehouse: '仓库A',
			damageQuantity: 300,
			damageAmount: 4500,
			damageStatus: '已处理',
			creationTime: '2024-11-04 14:45',
			remarks: '已批准',
			operation: ['详情', '设置']
		},
		{
			key: '5',
			documentCode: 'DC005',
			damageWarehouse: '仓库B',
			damageQuantity: 150,
			damageAmount: 2250,
			damageStatus: '待处理',
			creationTime: '2024-11-05 16:00',
			remarks: '待核实',
			operation: ['详情', '设置']
		},
		{
			key: '6',
			documentCode: 'DC006',
			damageWarehouse: '仓库C',
			damageQuantity: 80,
			damageAmount: 1200,
			damageStatus: '待处理',
			creationTime: '2024-11-06 11:00',
			remarks: '数据录入',
			operation: ['详情', '设置']
		},
		{
			key: '7',
			documentCode: 'DC007',
			damageWarehouse: '仓库A',
			damageQuantity: 500,
			damageAmount: 7500,
			damageStatus: '已处理',
			creationTime: '2024-11-07 08:45',
			remarks: '损失已确认',
			operation: ['详情', '设置']
		},
		{
			key: '8',
			documentCode: 'DC008',
			damageWarehouse: '仓库B',
			damageQuantity: 120,
			damageAmount: 1800,
			damageStatus: '已处理',
			creationTime: '2024-11-08 13:30',
			remarks: '审核通过',
			operation: ['详情', '设置']
		},
		{
			key: '9',
			documentCode: 'DC009',
			damageWarehouse: '仓库C',
			damageQuantity: 200,
			damageAmount: 3000,
			damageStatus: '待处理',
			creationTime: '2024-11-09 10:15',
			remarks: '待评估',
			operation: ['详情', '设置']
		},
		{
			key: '10',
			documentCode: 'DC010',
			damageWarehouse: '仓库A',
			damageQuantity: 400,
			damageAmount: 6000,
			damageStatus: '已处理',
			creationTime: '2024-11-10 15:00',
			remarks: '损失确认',
			operation: ['详情', '设置']
		}
	];

	return (
		<div>
			<BoxItem>
				<Button style={{ marginRight: '20px' }} size="large" type="primary">
					新建报损单
				</Button>
				<Button size="large">导出</Button>
			</BoxItem>
			<BoxItem>
				<Form
					layout="inline" // 使用 inline 布局使所有字段并排显示
					style={{ maxWidth: '100%' }}
				>
					<Form.Item
						label="报损仓库"
						style={{ width: '300px', marginBottom: '20px' }}
						wrapperCol={{ span: 15 }}
					>
						<Select defaultValue="请选择">
							<Select.Option value="仓库A">仓库A</Select.Option>
							<Select.Option value="仓库B">仓库B</Select.Option>
							<Select.Option value="仓库C">仓库C</Select.Option>
						</Select>
					</Form.Item>
					<Form.Item label="状态" style={{ width: '700px' }} wrapperCol={{ span: 5 }}>
						<Select defaultValue="请选择">
							<Select.Option value="未盘点">未盘点</Select.Option>
							<Select.Option value="盘点中">盘点中</Select.Option>
							<Select.Option value="已完成">已完成</Select.Option>
							<Select.Option value="已调帐">已调帐</Select.Option>
						</Select>
					</Form.Item>

					<Form.Item label="创建时间" style={{ width: '400px' }} wrapperCol={{ span: 20 }}>
						<RangePicker />
					</Form.Item>
					<Form.Item style={{ width: '400px' }} wrapperCol={{ span: 20 }}>
						<Button style={{ marginRight: '20px' }}>今</Button>
						<Button style={{ marginRight: '20px' }}>昨</Button>
						<Button style={{ marginRight: '20px' }}>近7天</Button>
						<Button>近30天</Button>
					</Form.Item>
					<Form.Item>
						<Button type="primary" style={{ marginRight: '20px' }}>
							搜索
						</Button>
						<Button>重置</Button>
					</Form.Item>
				</Form>
			</BoxItem>
			<BoxItem>
				<BorderTable columns={columns} dataSource={dataSource} />
			</BoxItem>
		</div>
	);
}
